<script lang="ts" setup>
import { ref,onMounted } from "vue";
import Masonry from "@/components/Masonry.vue"

const masonry = ref()
const data = ref({})
const randData = (count:number)=>{
    return Array.from({length:count},(_,_i)=>{
        return {
            title: ('300*220 ').repeat( 20 ) ,
            imgw:300,
            imgh:200,
            bgcolor:"rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+ Math.floor(Math.random() * 256)+",0.3)",
            img: `https://picsum.photos/300/200/?`+Math.random()
        }
    })
}
onMounted(()=>{
    data.value = randData(20)
})
const appends = ref()
// 加载更多数据
const loadmore = ()=>{
    appends.value = randData(20)
}
</script>
<template>
    <div id="infinite-list" style="padding:0 10px; width: 100%;height: 100%;box-sizing: border-box;overflow-y: scroll;">
        <Masonry ref="masonry" @loadmore="loadmore" :appends="appends" :data="data" :gap="15" :colWidth="280" :columns="4" eid="infinite-list"/>
    </div>
</template>
<style scoped>
</style>


